<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>039-设计模式-单例模式-惰性登陆框.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.login{
			/*display: none;*/
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -100px;
			margin-top: -140px;
			width: 200px;
			height: 280px;
			background-color: gray;
		}
		.mask{
			width: 100%;
			height: 600px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<input type="button" id="btn" value="登录">
	<!-- <div class="login"></div> -->
</body>
<script>
	var oBtn = document.getElementById('btn');
	var oLogin = document.querySelector('.login');
	/*
	var obj = null;
	function createSingleLayer(){
		if(!obj){
			var oDiv = document.createElement('div');
			oDiv.className = 'login';
			document.body.appendChild('oDiv');
			obj = oDiv;
		}
		return obj;
	}
	*/
	function getSingle(fn){
		var obj = null;
		return function(){
			if(!obj){
				obj = fn();
			}
			return obj;
		}
	}
	function createLoginLayer(){
		var oDiv = document.createElement('div');
		oDiv.className = 'login';
		document.body.appendChild(oDiv);
		return oDiv;
	}
	function createMaskLayer(){
		var oDiv = document.createElement('div');
		oDiv.className = 'mask';
		document.body.appendChild(oDiv);
		return oDiv;
	}
	var createSingleLoginLayer = getSingle(createLoginLayer);
	var createSingleMaskLayer = getSingle(createMaskLayer);
	oBtn.onclick = function(){
		// oLogin.style.display = 'block';
		/*
		var oDiv = document.createElement('div');
		oDiv.className = 'login';
		document.body.appendChild('oDiv');
		*/
		// createSingleLayer();
		// createLoginLayer();
		createSingleLoginLayer();
		createSingleMaskLayer();
	}
</script>
</html>